<template>
  <div class="height100">
    <ts-cascader
      v-model="categoryList"
      :data="cascaderData"
      :props="cascaderProps"
      @selected="changeTreeObj"
      ref="cascaderId"
      title="组件分类"
      :title-width="titleWidth"
      class="mbto-cascader"
    ></ts-cascader>
  </div>
</template>

<script>

import { $get } from "ts-element/packages/utils/ajax"

export default {
  name: 'classComponents',
  components: {},
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    resourceType: {
      type: [Number, String],
      default: 3
    },
    titleWidth: {
      type: [Number, String],
      default: 130
    },
    categoryCode: {
      type: String,
      default: ''
    },
    /*cascaderData:{
      type: Array,
      default: () => {
        return []
      }
    }*/
  },
  data: function () {
    return {
      // 上级目录
      cascaderData: [],
      cascaderProps: { value: 'id', label: 'name', checkStrictly: true },
      categoryList: [],
    }
  },
  created() { },
  mounted() {
    this.init()
  },
  computed: {},
  methods: {
    async init() {
      await this.getCascaderData()
    },
    changeTreeObj(val) {
      this.$emit('selected', val[0])
    },
    /**@desc 获取应用分类数据**/ async getCascaderData() {
      let res = await $get(`/ts-pdc/api/DesignerResourceCategory/getCategoryTree?resourceType=${this.resourceType}`)
      if (res.object && res.object.length > 0) {
        let treeData = res.object || []
        if (treeData.length > 0) {
          this.cascaderData = treeData
        }
      }
    },
  },
  watch: {
    categoryCode(n) {
      this.categoryList = n
    }
  }
}
</script>

<style lang="scss" scoped>
.mbto-cascader {
  /deep/.el-cascader {
    width: 100%;
    .el-input .el-input__inner {
      font-size: 12px;
      height: 30px;
    }
  }
}
</style>
